<template>
    <div>
        <div class="big">
            <div
                @click="controller"
                ref="controller"
                :style="flag == true ? 'color:yellow' : ''">
                文章控制
            </div>
            <div
                @click="publish"
                ref="publish"
                :style="flag == false ? 'color:yellow' : ''">
                文章发布
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    let router = useRouter()
    let flag = ref(false)
    // let controllers = ref<any>('')
    // let publishs = ref<any>('')
    function controller() {
        router.push('/controller')
        flag.value = true
    }
    function publish() {
        router.push('/publish')
        flag.value = false
    }
</script>

<style lang="scss">
    .big {
        width: 100%;
        height: 60px;
        background-color: #545c64;
        display: flex;
        text-align: center;
        line-height: 60px;
        div {
            color: white;
            width: 50%;
            height: 100%;
        }
        // div:hover {
        //     color: yellow;
        // }
    }
    .active {
        color: yellow;
    }
</style>
